{% extends 'console.html' %}

{% block maincontent %}
    <div class="layui-fluid">
        <div class="layui-card">
            <div class="layui-card-header layuiadmin-card-header-auto">
                <form class="layui-form">
                    <div class="layui-form-item">
                        <div class="layui-inline">
                            <label class="layui-form-label">数据源</label>
                            <div class="layui-input-inline">
                                <select id="source" name="source">
                                    <option value="">直接或搜索选择</option>
                                </select>
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label">schema</label>
                            <div class="layui-input-inline">
                                <input type="text" id="schema" name="schema" placeholder="schema"
                                       class="layui-input"
                                       lay-affix="clear">
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label">表名</label>
                            <div class="layui-input-inline">
                                <input type="text" id="table_name" name="table_name" placeholder="表名"
                                       class="layui-input"
                                       lay-affix="clear">
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label">表DDL脚本</label>
                            <div class="layui-input-inline">
                                <input type="text" id="table_define" name="table_define" placeholder="建表DDL脚本"
                                       class="layui-input"
                                       lay-affix="clear">
                            </div>
                        </div>
                        <div class="layui-inline">
                            <button class="layui-btn layuiadmin-btn-list" lay-submit lay-filter="formSubmit"
                                    id="btnSearch">
                                <i class="layui-icon layui-icon-search layuiadmin-button-btn"></i>搜索
                            </button>
                            <button class="layui-btn layuiadmin-btn-list layui-btn-primary" type="reset"
                                    id="customReset">
                                <i class="layui-icon layui-icon-set-sm layuiadmin-button-btn"></i>重置
                            </button>
                            <button class="layui-btn layuiadmin-btn-list layui-btn-normal" id="exportAllBtn"
                                    lay-submit lay-filter="export">
                                <i class="layui-icon layui-icon-export layuiadmin-button-btn"></i>导出cvs
                            </button>
                        </div>
                    </div>
                </form>
            </div>
            <div class="layui-card-body">
                <table id="tableDefinesTableId" lay-filter="tableDefinesTableFilter"></table>
            </div>
        </div>
    </div>
{% endblock %}


{% block script %}
    <script>
        layui.use(['table', 'form', 'layer'], function () {
            var $ = layui.$;
            var table = layui.table;
            var layer = layui.layer;
            var form = layui.form;

            // 初始化时加载下拉框数据
            $.ajax({
                url: '/dcs/api/tableDefineGetSources',
                type: 'GET',
                dataType: 'json',
                success: function (res) {
                    if (res.code === 0) {
                        var html = '<option value="">直接或搜索选择</option>';
                        $.each(res.data, function (index, item) {
                            html += '<option value="' + item.source + '">' + item.source + '</option>';
                        });
                        $('#source').html(html);
                        // 重新渲染表单
                        form.render('select');
                    }
                },
                error: function () {
                    layer.msg('数据加载失败');
                }
            });

            // 初始化表格
            var tableDefinesLayuiTable = table.render({
                elem: '#tableDefinesTableId',
                url: '/dcs/api/tableDefines',
                method: 'get',
                page: {
                    limit: 10, //每页显示条数
                    limits: [10, 20, 50, 100],
                    curr: 1, //起始页
                    groups: 5, //连续页码个数
                    prev: '上一页', //上一页文本
                    next: '下一页', //下一页文本
                    first: 1, //首页文本
                    //, last: 100                     //尾页文本
                    layout: ['prev', 'page', 'next',
                        'refresh', 'skip', 'count',
                        'limit']
                },
                cols: [
                    [ // 表头
                        // {type: 'checkbox', fixed: 'left'},
                        {
                            field: 'source',
                            title: '数据源名称',
                            width: 120,
                            align: 'left',
                            fixed: 'left',
                            // templet: addlink,
                            sort: true
                        },
                        // source, schema, table_name, table_comment, column_num, column_name, data_type, data_default, nullable, pkey, column_commen
                        // creation_date
                        {field: 'schema', title: 'schema', width: 130, align: 'left'},
                        {field: 'owner', title: '属主', width: 130, align: 'left'},
                        {field: 'table_name', title: '表名', width: 230, align: 'left'},
                        {
                            field: 'table_define',
                            title: '表定义ddl脚本',
                            width: 240,
                            align: 'left',
                            templet: tableDefineDetailFunction
                        },
                        {field: 'table_creator', title: '表的创建者', width: 115, align: 'left', sort: true},
                        {field: 'created', title: '源表创建时间', width: 180, align: 'left'},
                        {field: 'last_ddl_time', title: '源表最后ddl时间', width: 180, align: 'left'},
                        {field: 'creation_date', title: '数据拉取时间', width: 180, align: 'left'}
                        // ,{fixed: 'right', title: '操作', width: 150, toolbar: '#barOption'}
                    ]
                ]
            });
            // 初始化表格 - 结束

            // 绑定表单提交事件。点击搜索按钮，提交表单
            form.on('submit(formSubmit)', function (data) {
                tableDefinesLayuiTable.reload({
                    where: data.field,
                    page: {curr: 1}
                });
                return false;
            });

            // 数据导出
            form.on('submit(export)', function (data) {
                layer.confirm('导出当前查询条件的所有数据吗？', function (index) {
                    layer.close(index);
                    layer.msg('正在生成文件...', {icon: 16, time: 1500});
                    // 创建隐藏的iframe实现下载
                    setTimeout(function () {
                        var source2 = $('#source').val();
                        var schema2 = $('#schema').val();
                        var table_name2 = $('#table_name').val();
                        var table_define2 = $('#table_define').val();

                        // 构建导出URL url: '/dcs/api/tableInfos?export=1',
                        var exportUrl = '/dcs/api/exportTableDefines?';

                        exportUrl += 'source' + '=' + encodeURIComponent(source2) + '&';
                        exportUrl += 'schema' + '=' + encodeURIComponent(schema2) + '&';
                        exportUrl += 'table_name' + '=' + encodeURIComponent(table_name2) + '&';
                        exportUrl += 'table_define' + '=' + encodeURIComponent(table_define2) + '&';

                        var iframe = document.createElement('iframe');
                        iframe.style.display = 'none';
                        iframe.src = exportUrl;
                        document.body.appendChild(iframe);

                        // 下载完成后移除iframe
                        setTimeout(function () {
                            document.body.removeChild(iframe);
                            layer.msg('导出成功！');
                        }, 2000);
                    }, 1500);
                });
                return false;
            });

            function tableDefineDetailFunction(d) {
                var html = '<div><a rel="nofollow" style="color:#1E9FFF" href="javascript:void(0);" ' +
                    'lay-event="tableDefineDetailEvent">'
                    + d.table_define + '</a></div>';
                return html
            }

            // 监听 layui event 事件
            table.on('tool(tableDefinesTableFilter)', function (obj) {
                var data = obj.data;
                if (obj.event === 'tableDefineDetailEvent') {
                    table_define_detail_layer_f(data);
                }
            });

            // 查看数据详情
            function table_define_detail_layer_f(data) {
                var title = '查看详情';
                var index = layer.open({
                    type: 2,
                    offset: 'auto',
                    title: title + ' - ' + data.source + ' - ' + data.schema + '.' + data.table_name + ' 的 DDL脚本',
                    skin: 'layui-layer-rim', //加上边框
                    shadeClose: true,
                    chade: false,
                    maxmin: true,
                    area: ['70%', '80%'], //宽高
                    content: '/dcs/tableDefineCodeView?id=' + data.table_define_id
                });
                // 关闭窗口按钮
                $('#closeWindowsBtn').click(function () {
                    layer.close(index); // 关闭加载层
                });
            }

        });
    </script>
{% endblock %}

